<template>
	<view class="imageDetail">
		<view class="loading fix hide" :class="{hide:loading}"></view>

		<view class="container">
			<view class="feed-wrap" :data-feed-id=" feed.id ">
				<view class="user-container">
					<avatar v-if="feed.user" :user=" feed.user "></avatar>

					<view class="name"> {{feed.user.name}} </view>
				</view>
				<text class="content" v-if=" feed.feed_content ">{{ feed.feed_content }}</text>
				<view class="imgBox" v-for="(item,index) in feed.images" :key="index">
					<image @click="showImagePreview" :data-index="index" mode="widthFix" :style="{width: '688rpx',height:imgBoxHig(item) + 'rpx'}"
					 :src=" item.url " />
				</view>
				<view v-if=" feed.video " class="images">
					<view class="video-wrap" :data-feed-id=" feed.id " @click="viewVideo">
						<view class="image" :style="{backgroundImage: 'url(' + feed.video.cover.url + '?rule=q_80)'}"></view>
						<image v-if=" access.video " class="play-icon" src="../static/sns/ico_video_play.png" mode="aspectFit" />
					</view>
				</view>

				<view class="info">
					<view v-if=" feed.repostable_type === 'mall_commodities' " class="mall" bindtap="onDownload">
						<image class="shop-icon" src="/images/ico_goods_buy.png" mode="aspectFit"></image>
						{{ feed.repostable.title }}
					</view>
					<topic-image-widget v-if=" feed.topics.length " class="topic" :topic=" topic " />
					<view class="date">{{ formatTimestamp(feed.created_at) }}</view>
					<view class="operate">
						<view @click="onMore" style="width: 50rpx;higth:50rpx">
							<image src="../static/sns/font@2x.png" style="width: 100%;" mode="widthFix" />
						</view>
					</view>
				</view>
			</view>
			<!-- <advertising-list advertisingName="feed:single" /> -->
			<!-- 评论列表 -->
			<view class="comment-list">
				<view class="comment-list-title">最新评论</view>
				<view class="comment-item" v-for="(bItem,bIndex) in comments " :key="bIndex" @longpress="onReport" :data-comment=" bItem ">
					<view class="infoTitle" :id="'flex' + bIndex">
						<view class="userInfo">
							<avatar class="avatar" :user=" bItem.user "></avatar>
							<view class="username">{{ bItem.user.name }}</view>
						</view>
						<view class="like">
							<view class="left" :data-obj=" bItem " :data-index=" bIndex " @click="giveUp">
								<image v-if=" !bItem.liked " src="../static/sns/zan@2x.png" mode="widthFix" />
								<image v-else src="../static/sns/zan_on@2x.png" mode="widthFix" />
							</view>
							<view class="right" v-if="bItem.likes_count">{{bItem.likes_count}}</view>
						</view>
					</view>
					<view class="commentContent">
						<view @click="onReply" :data-comment=" bItem ">
							<view class="content">
								<block v-if=" bItem.reply_user "> 回复 <text class="user">{{ bItem.reply.name }}</text>:</block>
								{{ bItem.body }}
							</view>
							<view class="time">{{ 33333333 }}</view>
						</view>
						<!-- 回复评论 -->
						<view class="s-comment" v-if="bItem.child_comment.length > 0">
							<view class="commentBody" v-for="(cItem,cIndex) in bItem.child_comment " :key="cIndex" :data-comment=" cItem "
							 :data-findex="bIndex" :data-fcomment=" bItem " @click="childDelete">
								<view class="userTitle">
									<view class="user-info">
										<view class="img">
											<image v-if="cItem.user.avatar.url || cItem.user.avatar" :src=" cItem.user.avatar.url || cItem.user.avatar " />
											<image v-else src="../static/sns/images/ry_avatar.png" />
										</view>
										<view class="name" style="margin-left: 10rpx">{{ cItem.user.name }}</view>
										<view class="reply">回复</view>
										<view class="name">{{ cItem.reply.name }}</view>
									</view>
									<view class="like">
										<view class="left" :data-obj="cItem" :data-index=" bIndex " :data-sIndex="cIndex" @click="sGiveUp">
											<image v-if=" !cItem.liked " src="../static/sns/zan@2x.png" mode="widthFix" />
											<image v-else src="../static/sns/zan_on@2x.png" mode="widthFix" />
										</view>
										<view class="right" v-if="cItem.likes_count">{{ cItem.likes_count }}</view>
									</view>
								</view>
								<view>
									<view class="s-comment">
										<block>{{ cItem.body }}</block>
									</view>
									<view class="time">{{ 5555555 }}</view>
								</view>
							</view>

							<!-- 展开子评论 -->
							<view>
								<view class="commentBody" v-for="(chItem,chIndex) in isChildComment[bIndex].comment " :key="index" v-if=" bItem.id === chItem.reply_comment_id "
								 :data-index="bIndex" :data-comments="chItem" @click="deletOpenChild">
									<view class="userTitle">
										<view class="user-info">
											<view class="img">
												<image v-if="chItem.user.avatar.url || chItem.user.avatar" :src=" chItem.user.avatar.url || chItem.user.avatar" />
												<image v-else class="avatar" src="../static/sns/ry_avatar.png" />
											</view>
											<view class="name" style="margin-left: 10rpx">{{ chItem.user.name }}</view>
											<view class="reply">回复</view>
											<view class="name">{{ chItem.reply.name }}</view>
										</view>
										<view class="like">
											<view class="left" :data-obj="chItem" :data-index=" bIndex " :data-sindex="chIndex" @click="ssGiveUp">
												<image v-if=" !chItem.liked " src="../staitc/sns/zan@2x.png" mode="widthFix" />
												<image v-else src="../staitc/sns/zan_on@2x.png" mode="widthFix" />
											</view>
											<view class="right" v-if="chItem.likes_count">{{ chItem.likes_count }}</view>
										</view>
									</view>

									<view>
										<view class="s-comment">
											<block>{{ chItem.body }}</block>
										</view>
										<view class="time">{{ 55555 }}</view>
									</view>
								</view>
							</view>
						</view>

						<view class="openBtn" v-if=" bItem.child_comment_show " :data-id=" bItem.id " :data-index=" bIndex " @click="openAll">展开全部评论</view>

						<view class="openBtn" v-if=" isChildComment[bIndex].continueLode " :data-id=" bItem.id " :data-index=" bIndex "
						 @click="goLode">继续加载</view>
						<view class="openBtn" v-if=" isChildComment[bIndex].closeAll " :data-id=" bItem.id " :data-index=" bIndex "
						 @click="closeAll">收起</view>

					</view>

				</view>
				<view v-if=" comments.length === 0 " class="noComment">暂无评论</view>
				<view class="lodeMore" @click="lodeMoreComment" v-if=" lodeMore&&comments.length != 0&&comments.length >= 15 ">点击加载更多评论</view>
			</view>

		</view>
		<!-- 评论框 -->
		<block v-if="true">
			<!-- <view v-if=" commentFocus " class="comment-input-cover" @click="onCommentBlur"></view> -->
			<view class="comment-input-wrap" :class="{focus:!showCommentBroButton}" :style="{bottom:  keyboardOffsetTop + 'px',zIndex:  commentFocus ? 900 : 100 }">
				<form class="comment-form" @submit="onCommentConfirm">
					<textarea :value=" inputValue " class="input" :placeholder=" inputPlaceholder " :adjust-position=" false "
					 :show-confirm-bar="false" :fixed="true" @focus="onCommentFocus" :focus="commentFocus" name="comment_content"
					 placeholder-class="textarea-placeholder" @input="onBtn" @blur="onKeyboard" v-if="commentFocus" />
					<view @click="onCommentFocus" v-else class="textarea-placeholder input">{{inputPlaceholder}}</view>
		          <button class="sendButton" :style="{opacity : onBtn ? 1 : 0.4}" form-type="submit" v-if="!showCommentBroButton" @click="onBtn?gotoAnchor():''">发送</button>
		    </form>
		
		
		    <view  v-if="showCommentBroButton"  class="icon-wrap"  @click="gotoAnchor">
		      <image class="image" src="../static/sns/comment@2x.png" mode="aspectFit"></image>
		      <view class="label">{{ feed.feed_comment_count || 0 }}</view>
		    </view>
		    <view  v-if="showCommentBroButton"  class="icon-wrap" bindtap="onLike">
		      <image
		        class="image"
		        :src="feed.has_liked ? '../static/sns/zan_on@2x.png' : '../static/sns/zan@2x.png'"
		        mode="aspectFit"
		      ></image>
		      <view class="label">{{ feed.like_count || 0 }}</view>
		    </view>
		    <view  v-if="showCommentBroButton"  class="icon-wrap">
		      <button open-type="share" class="wechatImg">
		        <image class="icon-wrap-img" src="../static/sns/details_wechat@2x.png" mode="widthFix" />
		      </button>
		    </view>
		  </view>
		</block>

		<canvas
		  canvas-id="share-canvas"
		  style="width: 420px;height: 335px;position: fixed;background-color: #fff;opacity: 0;z-index: -1;top: 100%;left: 1000rpx;"
		></canvas>
		<!-- 未登录登陆组件 -->
		<login ref="login"></login>
	</view>
</template>

<script>
	import {
		$storage
	} from '@/utils'
	const defaultInputPlaceholder = '发表我的评论···'
	import avatar from "../components/avatar/avatar.vue"
	export default {
		data() {
			return {
				feed: {},
				topic: {},
				comments: [],
				commentFocus: false,
				inputValue: '',
				inputPlaceholder: defaultInputPlaceholder,
				replyUser: 0,
				reply_comment_id: 0,
				/** 键盘弹起高度 */
				keyboardOffsetTop: 0,
				loading: true,
				access: {},
				shareImage: '',
				share: false,
				lodeMore: true,
				afterId: 0,
				commentLen: 15,
				comFeedId: 0,
				isChildComment: [],
				contentType: '',
				showCommentBroButton: true,
				emit: false,
				cAfter: 0,
			}
		},
		components: {
			avatar
		},
		created: function() {},
		mounted: function() {

		},
		onShow: function() {


		},
		async onLoad(query) {
			wx.showLoading({
				title: '加载中...'
			})
			let feedId = query.feedId ? +query.feedId : +query.id
			const num = query.num
			this.comFeedId = feedId;
			this.contentType = num;
			if (!feedId && query.scene) {
				const scene = this.parseQueryString(query.scene)
				feedId = scene.feedId ? +scene.feedId : +scene.id
			}
			try {
				if (!feedId) throw new Error('该动态不存在或已被删除')
				this.loading = false
				await this.fetchFeed(feedId)
				this.fetchComments(feedId)
				// await this.fetchTopics()
			} catch (error) {
				// $logger.debug('动态详情加载失败', {
				// 	query,
				// 	error
				// })
				return wx.navigateTo({
					url: `/pages/not-page/not-page?type=${error.statusCode}`,
				})
				// }
			}
			wx.hideLoading()
		},
		methods: {
			showImagePreview(e) {
			    const {
			      target: {
			        dataset: { index },
			      },
			    } = e
				debugger
			    const images = this.feed.images
			    const urls = images.map((i) => i.url)
			    uni.previewImage({
			      current: urls[index],
			      urls,
			    })
			  },
			onMore() {
			    // deleteFeed
			
			    const userTest = user = $storage.get("user")
			    if (userTest !== undefined) {
			      const user = userTest
			      const user_id = this.feed.user_id
			      const feedId = this.feed.id
			      // console.log('feed++++', this.data.feed.user_id)
			      if (user.id === user_id) {
			        wx.showActionSheet({
			          itemList: ['删除'],
			          success: async ({ tapIndex }) => {
			            switch (tapIndex) {
			              case 0:
			                wx.showLoading({ title: '删除中' })
			                await this.$u.api.deleteFeed(feedId).then((res) => {
			                  wx.hideLoading()
			                  if (this.contentType == 0) {
			                    const pages = getCurrentPages()
			                    const prevPage = pages[pages.length - 2] //上一个页面
			                    prevPage.setData({
			                      mydata: {
			                        type: 'new',
			                      },
			                    })
			                    wx.navigateBack({
			                      //返回
			                      delta: 1,
			                    })
			                  }
			                  if (this.contentType == 1) {
			                    const pages = getCurrentPages()
			                    const prevPage = pages[pages.length - 2] //上一个页面
			                    prevPage.setData({
			                      mydata: {
			                        type: 'tui',
			                      },
			                    })
			                    wx.navigateBack({
			                      //返回
			                      delta: 1,
			                    })
			                  }
			                })

			                break
			            }
			          },
			        })
			      } else {
			        wx.showActionSheet({
			          itemList: ['举报'],
			          success: ({ tapIndex }) => {
			            switch (tapIndex) {
			              case 0:
			                this.onReportFeed()
			                break
			            }
			          },
			        })
			      }
			    } else {
			      uni.$emit('login')
			    }
			  },
			  onReportFeed() {
			    return wx.navigateTo({
			      url: `/pages/report/report?type=feed&id=${this.data.feed.id}`,
			    })
			  },
			getDate(d) {
				return d ? new Date(d) : new Date()
			},
			/** 将时间戳转换 */
			formatTimestamp(d, format = 'YYYY-MM-DD hh:mm') {
				const date = this.getDate(d)
				let hour = date.getHours()
				let minute = date.getMinutes()
				let second = date.getSeconds()
				const year = date.getFullYear()
				let month = date.getMonth()
				let day = date.getDate()
				if (hour < 10) {
					hour = '0' + hour
				}
				if (minute < 10) {
					minute = '0' + minute
				}
				if (second < 10) {
					second = '0' + second
				}
				month = month + 1
				if (month < 10) {
					month = 0 + month
				}
				if (day < 10) {
					day = 0 + day
				}
				const time =
					format === 'YYYY-MM-DD hh:mm' ?
					`${year}-${month}-${day} ${hour}:${minute}` :
					format === 'YYYYMMDDhhmmss' ?
					`${year}${month}${day}${hour}${minute}${second}` :
					`${year}-${month}-${day} ${hour}:${minute}:${second}`
			
				return time
			},
			// 默认加载图片外盒子高度
			imgBoxHig(item) {
			  var width = item.dimension.width
			  var height = item.dimension.height / (width / 688)
			  return height
			},
			/** 将 query string 转化为对象 */
			parseQueryString(str) {
				return JSON.parse(
					'{"' +
					decodeURIComponent(str).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') +
					'"}',
				)
			},
			async fetchComments(feedId) {
				this.comFeedId = feedId
				const {
					comments
				} = await this.$u.api.getFeedComments({id:feedId})
				if (comments.length) {
					this.comments = comments
					this.afterId = comments[comments.length - 1].id
				}
			},
			async fetchFeed(feedId) {
				const feed = await this.$u.api.getFeedDetail(feedId)
				this.feed = feed
			}
		}
	}
</script>

<style lang="scss">
	@import '../var';
	@import '../common.scss';
	.imageDetail{
		height: 100%;
	}
	.imgBox+.imgBox {
		margin-top: 20rpx;
	}

	.user-container {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		margin-bottom: 32rpx;

		.name {
			margin-left: $md;
			color: #001432;
			font-size: 24rpx;
			font-weight: normal;
		}
	}

	.comment-item {
		&:first-child {
			padding-top: 40rpx;
		}

		&+& {
			padding-top: 6rpx !important;
		}
	}

	.commentBody {
		&:first-child {
			border-top: 1rpx solid rgba(230, 233, 238, 0.767);
		}
	}

	.lodeMore {
		padding: 50rpx 0;
		text-align: center;
	}

	.container {
		background-color: $bgcolor-gray;

		.feed-wrap {
			margin-bottom: $xl;
			padding: 32rpx 32rpx 20rpx 32rpx;
			background-color: $bgcolor;

			.content {
				display: -webkit-box;
				margin-bottom: 32rpx;
				overflow: hidden;
				line-height: 60rpx;
				text-overflow: ellipsis;
				word-wrap: break-word;
				word-break: break-all;
				// autoprefixer: on
				-webkit-box-orient: vertical;
				// autoprefixer: off
				font-size: 34rpx;
				color: #465564;
			}

			.video-wrap {
				position: relative;
				height: 500rpx;

				.image {
					position: relative;
					width: 100%;
					height: 100%;
					overflow: hidden;
					background: $bgcolor-gray center / cover no-repeat;

					&::after {
						position: absolute;
						top: 0;
						right: 0;
						bottom: 0;
						left: 0;
						display: block;
						background: linear-gradient(transparent 50%, rgba(0, 0, 0, 0.4) 100%);
						content: '';
					}
				}

				.play-icon {
					position: absolute;
					bottom: 15rpx;
					left: 15rpx;
					width: 120rpx;
					height: 120rpx;
				}
			}
		}

		.info {
			display: flex;
			align-items: center;
			margin-top: 20rpx;

			.topic {
				flex: auto;
			}

			.mall {
				height: 44rpx;
				padding: 0 $lg;
				color: $text-color;
				font-size: $font-size-small;
				line-height: 44rpx;
				background-color: $bgcolor-gray;
				border-radius: 22rpx;

				.shop-icon {
					width: 23rpx;
					height: 21rpx;
				}
			}

			.date {
				flex: none;
				color: $info-color;
				font-size: $rouyu-font-size-small;
			}

			.operate {
				margin-left: auto;
				display: flex;
				flex: none;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				color: $info-color;

				&.dot {
					font-size: 32rpx;
					transform: translateY(-7px);
				}
			}
		}
	}

	.swiperBox {
		width: 690rpx;
		height: 230rpx;
		margin: auto;

		.swiperItem {
			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.comment-list {
		margin-top: 20rpx;
		padding-bottom: 100rpx;
		background-color: #fff;

		&-title {
			color: #001432;
			font-size: 28rpx;
			padding-left: 24rpx;
			padding-top: 32rpx;
		}

		.comment-item {
			display: flex;
			flex-direction: column;
			padding: 40rpx $xl $xl $xl;
			font-size: $font-size-small;
			background-color: $bgcolor;

			.infoTitle {
				display: flex;
				flex-direction: row;
				align-items: center;
				// background-color: yellow;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				// padding: 10rpx 80rpx 10rpx 0;
				padding-right: 80rpx;
			}

			.userInfo {
				display: flex;
				// flex-direction: c;
				align-items: center;

				.username {
					color: #001432;
					font-size: 24rpx;
					font-weight: 600;
				}
			}

			.like {
				height: 50rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				position: relative;

				.left {
					width: 32rpx;
					height: 32rpx;

					image {
						width: 32rpx;
						height: 32rpx;
					}
				}

				.right {
					position: absolute;
					top: 0;
					left: 45rpx;
					font-size: 20rpx;
				}
			}

			&:last-child {
				border-bottom: none;
			}

			.avatar {
				flex: none;
				margin-right: 27rpx;
			}

			.time {
				color: #8c96a5;
				font-size: 20rpx;
				padding: 20rpx 0;
			}

			.commentContent {
				padding: 0 40rpx 0 80rpx;
			}

			.content {
				color: #465564;
				font-size: 28rpx;

				.user {
					color: $title-color;
				}
			}
		}
	}

	// 评论里的评论
	.s-comment {
		color: #465564;
		font-size: 26rpx;
		margin-bottom: 24rpx;

		.commentBody {
			padding-top: 24rpx;
			border-bottom: 1px solid rgba(230, 233, 238, 0.767);

			& .s-comment {
				margin-top: 18rpx;
				margin-bottom: 0 !important;
			}

			.userTitle {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				padding: 0 40rpx 0 0;

				.user-info {
					display: flex;
					flex-direction: row;
					align-items: center;
					height: 50rpx;

					.img {
						width: 44rpx;
						height: 44rpx;
						border-radius: 22rpx;
						overflow: hidden;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.name {
						color: #001432;
						font-size: 22rpx;
						margin: 0 10rpx;
					}

					.reply {
						color: #8c96a5;
						font-size: 22rpx;
					}
				}
			}
		}
	}

	.openBtn {
		color: #001432;
		font-size: 26rpx;
		font-weight: 600;
		border-bottom: 1rpx solid #e6e9ee;
		padding: 18rpx 0 24rpx 0;
	}

	.comment-input-cover {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: $zindex-cover;
		background-color: rgba(0, 0, 0, 0.4);
	}

	// .comment-input-wrap {
	//     position: fixed;
	//     bottom: 0;
	//     z-index: $zindex-navigator;
	//     display: flex;
	//     align-items: center;
	//     width: 100%;
	//     height: 136rpx;
	//     padding: $lg $lg 40rpx $lg;
	//     background-color: $bgcolor;
	//     border-top: 1px solid $bgcolor-gray;
	//     .input {
	//         flex: auto;
	//         height: 100%;
	//         margin-right: $lg;
	//         padding: 0 1em;
	//         font-size: 28rpx;
	//         color: #afb4be;
	//         border: 1px solid $border-color;
	//         border-radius: 50rpx;
	//         line-height: 1.25;
	//     }
	//     .icon-wrap {
	//         display: flex;
	//         flex: none;
	//         flex-direction: row;
	//         align-items: center;
	//         justify-content: space-around;
	//         width: 80rpx;
	//         color: $info-color;
	//         font-size: $font-size-small;
	//         position: relative;
	//         .image {
	//             display: block;
	//             width: 36rpx;
	//             height: 36rpx;
	//             font-size: 40rpx;
	//             line-height: 36rpx;
	//             &.dot {
	//                 transform: translateY(-7px);
	//             }
	//         }
	//         .wechatImg {
	//             width: 40rpx;
	//             height: 40rpx;
	//             // line-height: 40rpx;
	//             display: flex;
	//             align-items: center;
	//             margin: 0;
	//             padding: 0;
	//             border: none;
	//             background-color: #ffffff;
	//             .icon-wrap-img {
	//                 width: 100%;
	//             }
	//         }
	//         .label {
	//             font-size: $font-size-small * 0.9;
	//             white-space: nowrap;
	//             position: absolute;
	//             top: 0;
	//             left: 65rpx;
	//         }
	//     }
	// }
	.comment-input-wrap {
		&.focus {
			display: flex;
			align-items: flex-end;
			height: 289rpx;

			.input {
				margin-top: 25rpx;
				height: 218rpx;
				width: 575rpx;
				padding: 20rpx;
				border-radius: 8rpx;
				margin-right: 0;
				display: inline-flex;
			}

			.sendButton {
				width: 105rpx;
				height: 48 prx;
				background-color: rgba(0, 70, 245, 1);
				border-radius: 28rpx;
				color: #fff;
				font-size: 24rpx;
				opacity: 0.4;
				margin-left: 24rpx;
				padding: 0 26rpx;
				display: inline-flex;
			}

			// .onSendButton {
			//     width: 105rpx;
			//     height: 48 prx;
			//     background-color: rgba(0, 70, 245, 1);
			//     border-radius: 28rpx;
			//     color: #fff;
			//     font-size: 24rpx;
			//     opacity: 0.4;
			//     margin-left: 24rpx;
			//     padding: 0 26rpx;
			//     display: inline-flex;
			// }
		}

		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: $zindex-navigator;
		display: flex;
		align-items: center;
		width: 100%;
		height: 136rpx;
		padding: $lg $lg 40rpx $lg;
		background-color: $bgcolor;
		border-top: 1px solid $bgcolor-gray;

		.comment-form {
			height: 100%;
			display: inline-flex;
			width: 100%;
			align-items: flex-end;
		}

		.input {
			// flex: auto;
			width: 338rpx;
			height: 64rpx;
			margin-right: $lg;
			padding: 16rpx 30rpx;
			font-size: 28rpx;
			border-radius: 32rpx 32rpx 32rpx 32rpx;
			background: rgba(244, 244, 246, 1);
			line-height: 1.25;
		}

		.icon-wrap {
			display: flex;
			flex: none;
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;
			width: 95rpx;
			color: $info-color;
			font-size: $font-size-small;
			position: relative;
			height: 50rpx;

			.wechatImg {
				width: 40rpx;
				height: 40rpx;
				line-height: 40rpx;
				background-color: #ffffff;
				display: flex;
				align-items: center;
				margin: 0;
				padding: 0;
				border: none;

				.icon-wrap-img {
					width: 100%;
				}
			}

			.image {
				display: block;
				width: 36rpx;
				height: 36rpx;
				font-size: 40rpx;
				line-height: 36rpx;

				&.dot {
					transform: translateY(-7px);
				}
			}

			// .download-icon {
			//   animation: 2s ease infinite up-down-float;
			// }
			.label {
				font-size: $font-size-small * 0.9;
				white-space: nowrap;
				position: absolute;
				top: 0;
				left: 45rpx;
			}
		}
	}

	@keyframes up-down-float {

		0%,
		50%,
		100% {
			transform: translateY(0rpx);
		}

		25% {
			transform: translateY(-10rpx);
		}
	}

	.comment-list-title {
		color: #001432;
		font-size: 28rpx;
		font-weight: 600;
		padding: 20rpx;
	}

	.noComment {
		text-align: center;
		height: 300rpx;
		font-size: 30rpx;
		color: #999999;
		line-height: 300rpx;
	}

	.imgBox {
		display: block;
		width: 100%;
		border-radius: 15rpx;
		overflow: hidden;

		image {
			display: block;
			width: 100%;
		}
	}
</style>
